<template>
  <el-table :data="tableData" style="width: 99%">
    <el-table-column prop="num" width="40" />
    <el-table-column prop="name" label="歌曲" />
    <el-table-column prop="singer" label="歌手" width="120" />
    <el-table-column prop="time" label="时长" width="80" />
    <el-table-column fixed="right" width="100">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="doDelete(scope.row)">
          <el-icon :size="16"><Delete /></el-icon>
        </el-button>
        <el-button link type="primary" size="small" @click="doPlay(scope.row)">
          <el-icon :size="16"><VideoPlay /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { Delete, VideoPlay } from '@element-plus/icons-vue'
import { musicPlayerStore } from '@/stores/musicPlayer'
// import { storeToRefs } from 'pinia'

const store = musicPlayerStore()
// const { isPlaying, loopMethod } = storeToRefs(store)
const { Play, Pause } = store

const doDelete = (e) => {
  Pause()
}

const doPlay = (e) => {
  // console.log(e.address)
  Play(e)
}

const tableData = [
  {
    num: 1,
    name: '杀死那个石家庄人',
    singer: '万能青年旅店',
    time: '05:44',
    address: '/public/music/万能青年旅店 - 杀死那个石家庄人.mp3'
  },
  {
    num: 2,
    name: '不愿回头',
    singer: '南征北战',
    time: '03:28',
    address: '/public/music/南征北战NZBZ - 不愿回头.mp3'
  },
  {
    num: 3,
    name: '秋思',
    singer: '陈亮',
    time: '05:15',
    address: '/public/music/陈亮 - 秋思.mp3'
  },
  {
    num: 4,
    name: '鲸歌（Cover 萨满乐队）',
    singer: '陈亮 宋依凡',
    time: '03:51',
    address: '/public/music/陈亮 宋依凡 - 鲸歌（Cover 萨满乐队）.mp3'
  }
]
</script>

<style scoped></style>
